<script setup>
import {TrendCharts,Checked,Van,List,Failed } from "@element-plus/icons-vue";
import { useRouter} from "vue-router";
const router = useRouter()

const logistics=()=>{
  router.push('/logistics')
}

const order=()=>{
  router.push('/order')
}

const tranction=()=>{
  router.push('/tranction')
}
</script>

<template>
  <div class="box">
    <el-card>
      <el-row>
        <el-col :span="5">
          <div class="order"  @click="order">
            <el-icon style="font-size: 30px"><List /></el-icon>
          <el-statistic title="今日订单">
          </el-statistic>
        </div>
        </el-col>
        <el-col :span="5">
          <div class="tranction"  @click="tranction">
            <el-icon style="font-size: 30px"><TrendCharts /></el-icon>
            <el-statistic title="交易额">
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="pay">
            <el-icon style="font-size: 30px"><Failed /></el-icon>
            <el-statistic title="待付款">

            </el-statistic>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="recipt">
            <el-icon style="font-size: 30px"><Checked /></el-icon>
            <el-statistic title="待收款">

            </el-statistic>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="logistics" @click="logistics">
            <el-icon style="font-size: 30px"><Van /></el-icon>
            <el-statistic title="物流" >

            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.box{
  margin-left: 5px;

  .order{
    display: flex;
    align-items: center;

  }
  .tranction{
    display: flex;
    align-items: center;

  }
  .pay{
    display: flex;
    align-items: center;

  }
  .recipt{
    display: flex;
    align-items: center;

  }
  .logistics{
    display: flex;
    align-items: center;

  }
}

</style>
